<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>蓝源Eloan-P2P平台->用户注册</title>
<link rel="stylesheet" href="/js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/css/core.css" type="text/css" />
<script type="text/javascript" src="/js/jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script>
<script type="text/javascript" src="/js/validate/jquery.validate.min.js"></script>
	<!--<script type="text/javascript" src="/js/validate/messages_cn.js"></script>-->

<style type="text/css">
	.el-register-form{
		width:600px; 
		margin-left:auto;
		margin-right:auto;
		margin-top: 20px;
	}
	.el-register-form .form-control{
		width: 220px;
		display: inline;
	}
	input[name='verifycode'] + label{
		position: absolute;
		top: 7px;
		left:220px;
	}
</style>
<script type="text/javascript">
  /*  function checkPhone(str){
        var re = /^0\d{2,3}-?\d{7,8}$/;
        if(re.test(str)){
           return true;
        }else{
            return false;
        }
    }*/
  //判断手机号是否正确的正则表达式
  function checkPhone(phone){
      if(!(/^1[34578]\d{9}$/.test(phone))){
          return false;
      }
      return true;
  }

	$(function(){
	    //给发送验证码按钮绑定事件
		$("#sendVerifyCode").click(function () {
			//
			var phone = $("#phoneNumber").val();
            if(checkPhone(phone)){   //如果手机号码格式正确,执行下面流程
              /*  1.前台发送：js
                0.判断手机号格式*/
               // 1.禁用按钮
                $(this).attr("disabled",true);
               // 2.执行发送
				$.post("sendVerifyCode",{"phone":phone},function (data) {
                   // 1.发送成功：
				    if(data.success){
						//1.提示发送成功
						$.messager.alert("温馨提示","验证码已发送到您手机上,请在5分钟内使用");
						var time = 10;
						var interval= window.setInterval(function () {
                            //2.倒计时
                            $("#sendVerifyCode").html(time+"s后重新发送");
                            time = time-1;
                            if(time<0){
                           /*     3.如果倒计时完成：
                   			1.清除倒计时
                                2.启用按钮*/
                                window.clearInterval(interval);
                                $("#sendVerifyCode").attr("disabled",false);
                                $("#sendVerifyCode").html("重新发送");
							}
                        },1000)
					}else{
                        $.messager.alert("温馨提示",data.msg);
                        $("#sendVerifyCode").attr("disabled",false);
                        $("#sendVerifyCode").html("重新发送");
					}
                })
            }else{
                //不正确,弹框提示,按钮样式启用
				$.messager.alert("温馨提示","手机格式错误");

			}
        });



	    //给表单验证增加额外的验证方法,value是当前验证的框里获取到的值,element是当前输入框
       $.validator.addMethod("checkPhone", function(value, element) {
                return checkPhone(value) },
            "手机号码格式不对");


        $("#registerForm").validate({
            errorClass: "text-danger",//替换表单验证失败后默认的样式,改成红色提示
            highlight: function(element, errorClass) { //替换表单验证失败后的事件,在事件里给DIV加样式变红
                    $(element).fadeOut(function() {
                        $(element).fadeIn();     });
                	$(element).closest("div.form-group").removeClass("has-success").addClass("has-error");
                  } ,
            unhighlight: function(element, errorClass) {//表单验证成功时的事件,把样式从红色改成绿色
                	$(element).closest("div.form-group").removeClass("has-error").addClass("has-success");
                  } ,
			//验证通过后的事件,把表单改成异步请求,,,
            submitHandler: function(form) {
                    $(form).ajaxSubmit(function (data) {
						if(data.success){
						    //bootStrap弹框提示
							$.messager.confirm("温馨提示","注册成功",function () {
								window.location.href="/login.html";
                            })
						}else{
						    $.messager.alert("温馨提示",data.msg);
						}
                    });
                  },
            rules:{
                username:{
                 /*   required: true,
                    rangelength: [11,11],
					number:true, 有了正则表达式验证,这几个可以不用写上,因为正则表达式这个方法已经都验证这些了*/
                    "checkPhone":"checkPhone",   //自定义的方法加双引号
					remote:"checkPhone"
				},
				password:{
                    required: true,
                    rangelength: [6,16],
				},
                confirmPwd:{
                    required: true,
                    rangelength: [6,16],
                    equalTo:'#password'
				},
                verifycode:{
                    required: true,
                    rangelength: [4,4]
				}
			},
			messages:{
                username:{
                    required: "必填",
                    rangelength: "长度必须为{0}",
                    number:"必须是数字",
                    remote:"该手机号码已经被注册"
                },
                password:{
                    required: "必填",
                    rangelength: "长度在{0}到{1}之间",
                },
                confirmPwd:{
                    required: "必填",
                    rangelength: "密码长度在{0}到{1}之间",
                    equalTo:'两次输入密码必须一致'
                },
                verifycode:{
                    required: "验证码必填",
                    rangelength: "长度必须为{0}"
                }

			}
		})

	})
</script>
</head>
<body>
	<!-- 网页头信息 -->
	<div class="el-header" >
		<div class="container" style="position: relative;">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="/">首页</a></li>
				<li><a href="/login.html">登录</a></li>
				<li><a href="#">帮助</a></li>
			</ul>
		</div>
	</div>
	
	<!-- 网页导航 --> 
	<div class="navbar navbar-default el-navbar">
		<div class="container">
			<div class="navbar-header">
				<a href=""><img alt="Brand" src="/images/logo.png"></a>
				<span class="el-page-title">用户注册</span>
			</div>
		</div>
	</div>
	
	<!-- 网页内容 -->
	<div class="container">  
		<form id="registerForm" class="form-horizontal el-register-form"  action="/userRegister" method="post" >
			<p class="h4" style="margin: 10px 10px 20px;color:#999;">请填写注册信息，点击“提交注册”即可完成注册！</p>
			<!--<div class="form-group">-->
				<!--<label class="control-label col-sm-2">用户名</label>-->
				<!--<div class="col-sm-10">-->
					<!--<input type="text" placeholder="用户名" autocomplete="off" name="username" class="form-control" id="username"/>-->
					<!--<p class="help-block">用户名为4~16位字母，数字，符号或中文</p>-->
				<!--</div>-->
			<!--</div>-->
			<div class="form-group">
				<label class="control-label col-sm-2">手机号码</label>
				<div class="col-sm-10">
					<input type="text" placeholder="手机号码" autocomplete="off" name="username" class="form-control" id="phoneNumber"/>
					<p class="help-block">请使用输入正确的手机号码</p>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2">手机验证码</label>
				<div class="col-sm-10">
					<input type="text" placeholder="手机验证码" style="width: 100px" autocomplete="off" name="verifycode" class="form-control" id="verifycode"/>
					<button type="button" class="btn btn-success" id="sendVerifyCode">
						发送验证码
					</button>
					<p class="help-block">用户名为4~16位字母，数字，符号或中文</p>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2">密&emsp;码</label>
				<div class="col-sm-10">
					<input type="password" placeholder="密码" autocomplete="off" name="password" id="password" class="form-control" />
					<p class="help-block">密码为4~16位字符组成,采用数字、字母、符号安全性更高</p>
				</div> 
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2">确认密码</label>
				<div class="col-sm-10">
					<input type="password" autocomplete="off" name="confirmPwd" class="form-control" />
					<p class="help-block">请再次填写密码</p>	 
				</div>
			</div> 
			<div class="form-gorup">   
				<div class="col-sm-offset-2">  
					<button type="submit" class="btn btn-success">
						同意协议并注册
					</button>
					&emsp;&emsp;
					<a href="/login.html" class="text-primary">已有账号，马上登录</a>
					
					<p style="padding-left: 50px;margin-top: 15px;">
						<a href="#">《使用协议说明书》</a>
					</p>
				</div>
			</div>
		</form>
	</div>
	<!-- 网页版权 -->
	<div class="container-foot-2">
		<div class="context">
			<div class="left">
				<p>专注于高级Java开发工程师的培养</p>
				<p>版权所有：&emsp;2015广州小码哥教育科技有限公司</p>
				<p>地&emsp;&emsp;址：&emsp;广州市天河区棠下荷光三横路盛达商务园D座5楼</p>
				<p>电&emsp;&emsp;话： 020-29007520&emsp;&emsp;
					邮箱：&emsp;service@520it.com</p>
				<p>
					<a href="http://www.miitbeian.gov.cn" style="color: #ffffff">ICP备案
						：粤ICP备字1504547</a>
				</p>
				<p>
					<a href="http://www.gzjd.gov.cn/wlaqjc/open/validateSite.do" style="color: #ffffff">穗公网安备：44010650010086</a>
				</p>
			</div>
			<div class="right">
				<a target="_blank" href="http://weibo.com/ITxiaomage"><img
					src="/images/sina.png"></a>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</body>
</html>